<template>
    <div :class="`shop-goods-item ${mode}`">
        <div @click="gotoDetail">
            <div class="goods-image">
                <img class="img-value" :src="imageSrc" alt="">
            </div>
            <div class="goods-name title-color">{{itemInfo.name}}</div>
            <div class="goods-price">
                <div class="sale-price" :style="fontColor">
                    <span class="label">￥</span>{{itemInfo.min_price}}
                    <span v-if="itemInfo.max_price && itemInfo.min_price != itemInfo.max_price" class="is-up">起</span>
                </div>
                <div v-if="isHaveAddIcon" class="goods-action" @click.stop="addToBag">
                    <MiniIcon name="addbag" :size="18" :mode="mode" :styleMode="styleMode" :theme="theme" />
                </div>
            </div>
        </div>
        <ChooseGoods
            v-if="goodsDetail"
            ref="choose"
            :info="goodsDetail"
            :isOnlySelect="false"
            :isChangeSku="false"
            :isAddBag="true"
            :isNowBuy="false"
            :mode="mode"
            :styleMode="styleMode"
            :theme="theme"
            @ensure="ensureChoose"
        />
    </div>
</template>

<script>
import { mapActions } from 'vuex';
import Vue from 'vue';
import { Lazyload } from 'vant';
import { MiniIcon } from '@components/base';
Vue.use(Lazyload);
import { redirectTo, createShopImageSrc } from '@common/utils';
import { getShopGoodsPrice } from '@biztools/shop';
import { TipError, TipSuccess } from '@common/tip';
import ModeMixin from '@common/mixin';
import ChooseGoods from '../components/ChooseGoods';
import logger from '@common/logger';
import EventBus from '@common/eventBus';
export default {
    name: 'GoodsItem', // 商品项
    mixins: [ModeMixin],
    components: {
        MiniIcon,
        ChooseGoods,
    },
    props: {
        itemInfo: {
            type: Object,
            default() {
                return {};
            },
        },
        isBrand: {
            type: Boolean,
            default: true,
        },
        storeInfo: {
            type: Object,
            default: () => {},
        },
        isHaveAddIcon: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        itemPrice() {
            const { itemInfo } = this.$props;
            return getShopGoodsPrice(itemInfo);
        },
        imageSrc() {
            const { itemInfo } = this.$props;
            return createShopImageSrc(itemInfo.pic);
        },
    },
    data() {
        return {
            goodsDetail: null,
        };
    },
    methods: {
        ...mapActions([
            'setGoodsDetailInfo',
            'setGoodsWarehouseInfo',
            'setSpecialShopInfo',
            'getSpecialStoreInfoById',
            'getGoodsAllInfo',
            'addShopBagItem',
        ]),
        async gotoDetail() {
            const { storeInfo, isBrand, itemInfo } = this.$props;
            if (storeInfo && !isBrand) {
                const storeBaseInfo = await this.getSpecialStoreInfoById(storeInfo.id);
                logger.debugger('------------->', storeBaseInfo);
                // 设置专场门店信息
                this.setSpecialShopInfo({
                    ...storeBaseInfo,
                    ...storeInfo,
                });
            } else {
                this.setSpecialShopInfo(null);
            }
            this.setGoodsWarehouseInfo();
            this.setGoodsDetailInfo(itemInfo);
            redirectTo(`shop/detail/${itemInfo.id}`);
        },
        async addToBag() {
            const { itemInfo, storeInfo } = this.$props;
            if (itemInfo.status === 0) {
                TipError('商品已下架');
                return;
            }
            logger.debugger('GoodItem => storeInfo', storeInfo);
            // 获取详情
            const detail = await this.getGoodsAllInfo({
                detail: itemInfo,
                warehouseId: storeInfo && storeInfo.wearhouse_id || storeInfo.id || 0,
            });
            logger.success('ShopTabList => 获取的商品详情为：', detail);
            this.goodsDetail = detail;
            setTimeout(() => {
                this.$refs.choose.show();
            }, 50);
            // this.$emit('addToBag', this.$props.itemInfo);
        },
        async ensureChoose(skuInfo) {
            logger.info('ShopTabList => 选择的商品规格为', skuInfo);
            const item = {
                prod_id: this.goodsDetail.id,
                sku_id: skuInfo.id,
                quantity: skuInfo.quantity,
            };
            const flag = await this.addShopBagItem(item);
            if (flag) {
                TipSuccess('加入购物车成功');
                EventBus.$emit('RefreshBagData');
            }
        },
    },
};
</script>

<style lang="less">
@goods-item-width: 109px;
@goods-item-img-bg: #F8F6F9;
.shop-goods-item {
    display: inline-block;
    width: 100%;
    max-width: @goods-item-width;
    position: relative;
    .p-b(@gap);
    // &:first-child {
    //     .m-l(@shop-gap-md);
    // }
    // &:last-child {
    //     .m-r(@shop-gap-md);
    // }
    .m-r(@shop-gap);
    .goods-image {
        width: 100%;
        height: @goods-item-width;
        background-color: @goods-item-img-bg;
        border-radius: @shop-border-radius;
        .flex-row-center();
        overflow: hidden;
        .img-value {
            width: 100%;
            height: 100%;
        }
    }
    .goods-name {
        width: 100%;
        height: 35px;
        font-size: 13px;
        color: @text-color;
        .text-overflow-line(2);
        white-space: normal;
        .m-v(@shop-gap);
    }
    .goods-price {
        .flex();
        justify-content: space-between;
        align-items: baseline;
        font-weight: 500;
        color: @shop-price-color;
        .label {
            .m-r(-3);
        }
        .sale-price {
            font-size: @font-size-md;
            font-family: @font-family-number;
        }
        .is-up {
            font-size: @shop-font-size-sm;
        }
    }
}
</style>
